<div class="ms_middle">
  <div class="div_input">
    <input type="text" class="txt_search" id="txt_search" />
    <span class="icon-search">
      <span class="icon-search-box">
        <img class="icon-search2" src="/css/changecity-imges/search.png" />
      </span>
    </span>
    <input id="thispagetype" type="hidden" value="8" />
    <div id="searchAppend"></div>
  </div>
</div>
<script src="./jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
  //点击其他地方收起下拉框
  $(document).click(function (event) {
    $('#searchAppend').css('display', 'none')
    $('#searchAppend').html('')
  })
  $(document).on("click", '.div_input', function (event) {
    event.stopPropagation();
  })
  $(document).ready(function () {
    $('#searchAppend').css('display', 'none')
    //输入搜索值发送请求并显示下拉框
    //获得焦点
    $(".div_input input").focus(function () {
      $.ajax({
        type: 'post',
        url: '/ashx/comm.ashx',
        data: {
          action: "GetshiNameList",
          shiName: encodeURIComponent($(this).val())
        },
        success: function (res) {
          var data = JSON.parse(res)
          if (data.status == 10001) {
            var html = '';
            for (var i = 0; i < data.dataList.length; i++) {
              if (i < 10) {
                html += '<a class="searchSelect" id="' + data.dataList[i].id + '" href="http://' + data.dataList[i].spell + '.jrzp.com/">' + data.dataList[i].name + '</a>'
              }
            }
            $('#searchAppend').css({ 'display': 'block' })
            $('#searchAppend').html(html)
          } else if (data.status == 30002) {
            $('#searchAppend').html('')
            $('#searchAppend').css('display', 'none')
          }
        }, error: function () {
          $('#searchAppend').html('')
          $('#searchAppend').css('display', 'none')
        }
      })
    })
    //输入框值改变
    $(".div_input input").keyup(function () {
      $.ajax({
        type: 'post',
        url: '/ashx/comm.ashx',
        data: {
          action: "GetshiNameList",
          shiName: encodeURIComponent($(this).val())
        },
        success: function (res) {
          var data = JSON.parse(res)
          if (data.status == 10001) {
            var html = '';
            for (var i = 0; i < data.dataList.length; i++) {
              if (i < 10) {
                html += '<a class="searchSelect" id="' + data.dataList[i].id + '" href="http://' + data.dataList[i].spell + '.jrzp.com/">' + data.dataList[i].name + '</a>'
              }
            }
            $('#searchAppend').css({ 'display': 'block' })
            $('#searchAppend').html(html)
          } else if (data.status == 30002) {
            $('#searchAppend').html('')
            $('#searchAppend').css('display', 'none')
          }
        }, error: function () {
          $('#searchAppend').html('')
          $('#searchAppend').css('display', 'none')
        }
      })

    })
    //赋值
    $('#searchAppend').on('click', '.searchSelect', function () {
      $('#searchAppend').css('display', 'none');
      $('.div_input .txt_search').val($(this).html())
    })
  })

  // 输入法
  // var inp = document.getElementById('name');
  // var isComposing = false;
  // inp.addEventListener('compositionstart', function () {
  //   isComposing = true;
  //   console.log('中文开始输入');
  // })
  // inp.addEventListener('compositionend', function () {
  //   isComposing = false;
  //   console.log('中文结束输入');
  //   search(inp.value);
  // })
  // inp.addEventListener('input', function () {
  //   if (isComposing) {
  //     return;
  //   }
  //   var value = inp.value;
  //   // 执行搜索逻辑
  //   search(value);
  // });
  // function search(value) {
  //   console.log(value, "执行搜索");
  //   // 实际的搜索逻辑
  // }
</script>
<style>
  .icon-search-box {
    display: inline-block;
    width: 23px;
    height: 20px;
    position: absolute;
    top: -12px;
  }

  .icon-search2 {
    width: 100%;
    height: 100%;
  }

  .wrapper .search {
    position: relative;
  }

  .div_input {
    display: inline-block;
    margin: 7px 0;
  }

  #searchAppend {
    position: absolute;
    top: 58px;
    border: 1px solid #ddd;
    width: 369px;
    max-height: 200px;
    overflow: scroll;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10;
  }

  #searchAppend .searchSelect {
    margin: 0;
    padding: 3px 1em 3px 0.4em;
    cursor: pointer;
    min-height: 0;
  }

  #searchAppend .searchSelect:hover {
    color: #bbb;
    text-decoration: none;
  }

  .searchSelect {
    width: 100%;
    display: inline-block;
  }
</style>

 

